<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2017/1/3.
     */
    import b from '../bus'

    export default {
        props: {
            userInfo: {
                default: null
            }
        },
        data () {
            return {
                firstName: '翁',
                name: '翁诚舟',
                bg: 'b1',
                captain: '',
                inviter: '',
                popupVisible: false,
                recordVisible: false,
                withdrawalVisible: false,
                records: [], // 提现记录

                way: '',
                amount: '',
                recordStateColorMap: ['b16', 'b7', 'b14'],
                recordStateIconMap: ['&#xe657;', '&#xe600;', '&#xe60d;'],
            }
        },
        computed: {
            withdrawalWay () {
                return {
                    alipay: this.filter(this.userInfo.alipay),
                    bankName: this.filter(this.userInfo.bank_name),
                    cardNumber: this.filter(this.userInfo.bank_card)
                }
            },
            options () {
                return [
                    {
                        label: '支付宝',
                        value: 'alipay',
                        disabled: this.withdrawalWay.alipay == ''
                    },
                    {
                        label: '银行卡',
                        value: 'bank',
                        disabled: this.withdrawalWay.cardNumber == ''
                    }
                ]
            },
            isListEmpty () {
                return this.records.length == 0
            }
        },
        mounted () {
            this.changeTitle('车捕头-个人中心');
            b.$emit('getInfo');
        },
        methods: {
            filter (field) {
                let rst = field;
                if (field == 'None' || field == 'null') {
                    rst = '';
                }
                return rst
            },
            getRecords () {
                this.get('/withdraw', {}, {errmsg: '获取提现记录失败'})
                    .then(res => {
                        if (res.success && res.data.rows) {
                            this.records = res.data.rows.map(e => {
                                let ele  = e;
                                ele.time = e.last_update_at.split(' ')[0];
                                ele.ways = e.payment.split(',');
                                ele.icon = this.recordStateIconMap[e.state];
                                ele.color = this.recordStateColorMap[e.state];
                                return ele
                            })
                        }
                    })
            },
            withdrawal () {
                if (!this.withdrawalWay.alipay && !this.withdrawalWay.bankName && !this.withdrawalWay.cardNumber) {
                    MessageBox('提示', '未设置提现方式，请先设置');
                    this.showPopUp();
                    return
                }

                this.withdrawalVisible = true;

            },
            doWithdrawal () {
                if (!this.amount) {
                    MessageBox('提示', '请输入提现金额');
                    return
                }
                if (this.amount < 100) {
                    MessageBox('提示', '提现金额需大于100');
                    return
                }
                if (this.amount > 1000) {
                    MessageBox('提示', '每日提现金额不大于1000');
                    return
                }

                let postData = new FormData();
                postData.append('amount', this.amount);

                this.jax('/withdraw', postData, {errmsg: '提现申请失败，请稍后再试'})
                    .then(res => {
                        if (res.success) {
                            MessageBox('申请成功', '我们将在48小时内处理');
                            b.$emit('getInfo');
                            this.hideWithdrawal();
                        } else {
                            MessageBox('提示', res.message);
                        }
                    })
            },
            setWay () {
                if (!this.withdrawalWay.alipay && !this.withdrawalWay.bankName && !this.withdrawalWay.cardNumber) {
                    MessageBox('提示', '支付方式不能为空');
                    return
                }

                if ((this.withdrawalWay.bankName && !this.withdrawalWay.cardNumber) || (!this.withdrawalWay.bankName && this.withdrawalWay.cardNumber)) {
                    MessageBox('提示', '银行信息需填完整');
                    return
                }

                let postData = new FormData();
                postData.append('account', this.withdrawalWay.alipay);
                postData.append('name', this.withdrawalWay.bankName);
                postData.append('card', this.withdrawalWay.cardNumber);

                this.jax('/downstreams/payment', postData, {errmsg: '设置失败失败，请稍后再试'})
                    .then(res => {
                        if (res.success) {
                            MessageBox('提示', '保存成功!');
                            this.hidePopUp();
                        }
                    })
            },
            showPopUp () {
                this.popupVisible = true
            },
            hidePopUp () {
                this.popupVisible = false
            },
            showRecord () {
                this.recordVisible = true;
                this.getRecords();
            },
            hideRecord () {
                this.recordVisible = false
            },
            hideWithdrawal () {
                this.withdrawalVisible = false
            },
            logout () {
                this.jax('/logout', {}, {errmsg: '登出失败'})
                    .then(res => {
                        if (res.success) {
                            this.$router.push('/login')
                        }
                    })
            }
        },
    };
</script>

<template>
    <div class="profile" layout="column top-center">
        <div class="profile__head" :class="bg"></div>

        <div class="profile__info" layout="row center-left">
            <div class="profile__portrait" layout="row center-center" @click="logout">
                <i class="iconfont shutdown">&#xe608;</i>
            </div>
            <div class="profile__intro" layout="column center-left">
                <div class="profile__name">{{userInfo.name}}</div>
                <div class="profile__address">{{userInfo.province}}-{{userInfo.city}}</div>
            </div>
        </div>


        <div class="profile__card" layout="row center-left">
            <div class="profile__unit">
                <p class="profile__money" v-if="userInfo.role == 0">
                    {{userInfo.fund}}
                </p>
                <p class="profile__money" v-else>
                    捕头
                </p>
                <p class="profile__ps" v-if="userInfo.role == 0">赏金池（元）</p>
                <p class="profile__ps" v-else>身份</p>
            </div>
        </div>
        <div class="profile__content">
            <mt-cell v-if="userInfo.role == 0" title="推荐码" :value="userInfo.recommend_code">
                <i class="iconfont" slot="icon">&#xe61e;</i>
            </mt-cell>
            <mt-cell v-if="userInfo.role == 1" title="公司" :value="userInfo.company">
                <i class="iconfont" slot="icon">&#xe635;</i>
            </mt-cell>
            <mt-cell v-if="userInfo.role == 0" title="提现方式" value="">
                <i class="iconfont" slot="icon">&#xe607;</i>
                <mt-button size="small" class="cir" plain type="primary" @click="showPopUp">设置</mt-button>
            </mt-cell>
            <mt-cell v-if="userInfo.role == 0" title="提现记录" value="">
                <i class="iconfont" slot="icon">&#xe60d;</i>
                <mt-button size="small" class="cir" plain type="primary" @click="showRecord">查看记录</mt-button>
            </mt-cell>
        </div>
        <mt-button  v-if="userInfo.role == 0" type="primary" class=" mt10" size="large" @click="withdrawal">申请提现</mt-button>
        <!-- 提现方式设置-->
        <mt-popup
                class="cb__popup cb__popup--dark"
                v-model="popupVisible"
                position="right"
        >
            <mt-header title="提现方式设置">
                <mt-button @click="hidePopUp" icon="back" slot="left">返回</mt-button>
            </mt-header>
            <h5 class="mint-cell__title">方式一（支付宝）</h5>
            <div>
                <mt-field class="mint-cell--short" label="支付宝" placeholder="支付宝账号"
                          v-model="withdrawalWay.alipay"></mt-field>
            </div>
            <h5 class="mint-cell__title">方式二（银行卡）</h5>
            <div>
                <mt-field class="mint-cell--short" label="卡号" placeholder="银行卡号"
                          v-model="withdrawalWay.cardNumber"></mt-field>
                <mt-field class="mint-cell--short" label="开户支行" placeholder="开户支行"
                          v-model="withdrawalWay.bankName"></mt-field>
            </div>

            <p class="cb__more">温馨提示：<br/>提现申请后，将在48小时内将款项打入指定账户。请务必保证支付宝或银行卡与本APP认证人的一致性，否则自行承担损失</p>

            <mt-button class="cb__popup-btn cb__popup-btn--normal" type="primary" size="large" @click="setWay">保存
            </mt-button>
        </mt-popup>
        <!-- 提现记录-->
        <mt-popup
                class="cb__popup cb__popup--dark"
                v-model="recordVisible"
                position="right"
        >
            <mt-header title="提现记录">
                <mt-button @click="hideRecord" icon="back" slot="left">返回</mt-button>
            </mt-header>
            <li v-if="isListEmpty" class="list__empty">
                暂无提现记录
            </li>
            <div v-for="record in records" class="record">
                <i class="iconfont record__status" :class="record.color" v-html="record.icon"></i>
                <h5 class="record__title">￥{{record.amount}}</h5>
                <p class="record__way">提现方式：{{record.payment}}</p>
                <p class="record__way">订单号：{{record.flow}}</p>
                <span class="record__time">{{record.time}}</span>
            </div>
        </mt-popup>
        <!-- 提现-->
        <mt-popup
                class="cb__popup cb__popup--dark"
                v-model="withdrawalVisible"
                position="right"
        >
            <mt-header title="提现">
                <mt-button @click="hideWithdrawal" icon="back" slot="left">返回</mt-button>
            </mt-header>

            <mt-field class="mt10" label="提现金额" v-model="amount" placeholder="请输入要体现的金额"></mt-field>

            <p class="cb__more">温馨提示：<br/>打款优先通过支付宝，如没有支付宝则通过银行卡的方式</p>

            <mt-button class="cb__popup-btn cb__popup-btn--normal mt10" type="primary" size="large"
                       @click="doWithdrawal">申请提现
            </mt-button>
        </mt-popup>
    </div>
</template>
